import React, { memo, useEffect, useRef } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux";

import { Carousel } from 'antd';
import GHThemeHeaderRCM from "@/components/thenme-header-rcm"
import GHAlbumCover from "@/components/album-cover"
import { AlbumWrapper } from "./style";
import { getAlbum } from "../../store/actionCreators";

export default memo(function GHNewAlbum(props) {

  const carouselRef = useRef();
  const dispatch = useDispatch()
  const state = useSelector(state => ({
    numAlbum: state.getIn(["recommend", 'newAlbum'])
  }), shallowEqual)
  useEffect(() => {
    dispatch(getAlbum())
  }, [dispatch])
  return (
    <AlbumWrapper>
      <GHThemeHeaderRCM title="新碟上架" moreLink="/discover/album" />
      <div className="content">
        <div className="arrow arrow-left sprite_02"
          onClick={e => carouselRef.current.prev()}></div>
        <div className="album">
          <Carousel ref={carouselRef} dots={false}>
            {
              [0, 1].map(item => {
                return (
                  <div key={item} className="page">
                    {
                      state.numAlbum.slice(item * 5, (item + 1) * 5).map(item => {
                        return (
                          <GHAlbumCover key={item.id} info={item} />
                        )
                      })
                    }
                  </div>
                )
              })
            }
          </Carousel>
        </div>
        <div className="arrow arrow-right sprite_02"
          onClick={e => carouselRef.current.next()}></div>
      </div>
    </AlbumWrapper>
  )
})